<script setup lang='ts'>
defineOptions({ name: 'AppSportsBetSlipSelectionOdds' })
const props = defineProps<{ odds: number }>()

const saveNum = ref(props.odds)
const upDown = ref('')


watch(() => props.odds, (newOdds: number) => {

  if (saveNum.value !== newOdds) {
    upDown.value = newOdds > saveNum.value ? 'up' : 'down'
    saveNum.value = newOdds
  }
})
</script>

<template>
  <div class="flex-1">
    <div class="odds" :class="[upDown]">
      {{ saveNum }}
    </div>
    <span :class="['arrow', upDown]"></span>
  </div>
</template>

<style lang='scss' scoped>
.odds {
  font-size: 18px;
  color: var(--color-text-white-0);
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  line-height: 24px;

  &.up {
    color: #24ee89;
  }

  &.down {
    color: #FC3C3C;
  }
}

.arrow {
  width: 0;
  height: 0;
  margin: 0 0 0 4px;
  display: inline-block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  letter-spacing: 0.6px;
  vertical-align: middle;

  &.up {
    border-bottom: 5px solid #24ee89;
  }

  &.down {
    border-top: 5px solid #FC3C3C;
  }
}
</style>
